<template>
  <div class="visitor-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree @onSelect="onTreeSelected"></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <top-title :updateTime="true" :content="content"></top-title>
        <div class="l-w_content">
          <div class="l-w_c_content">
            <div class="pageInfo">
              <div class="tabsList">
                <a-tabs class="tabs" v-model="activeKey" @tabClick="handelClick" destroyInactiveTabPane>
                  <a-tab-pane key="0" tab="可疑物品" forceRender>
                    <list ref="listRef0" :idCode="selectedKey" :villageList="villageList"></list>
                  </a-tab-pane>
                  <a-tab-pane key="1" tab="电瓶回收" forceRender>
                    <BatteryRecycling
                      industryInformationId="1551768930341638150"
                      ref="listRef1"
                      :idCode="selectedKey"
                    ></BatteryRecycling>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="电动车/摩托车回收" forceRender>
                    <ElectricVehicleRecycling
                      ref="listRef2"
                      :idCode="selectedKey"
                      industryInformationId="1551768930341638150"
                    ></ElectricVehicleRecycling>
                  </a-tab-pane>
                </a-tabs>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import list from './modules/list'
import { getCommunityList } from '@/api/api'
import BatteryRecycling from '../machineRepair/batteryRecycling.vue'
import ElectricVehicleRecycling from '../machineRepair/electricVehicleRecycling.vue'

export default {
  name: 'pringing',
  components: { leftTree, topTitle, list, BatteryRecycling, ElectricVehicleRecycling },
  data() {
    return {
      content: [['废旧物品回收业']],
      activeKey: '0',
      key: '',
      selectedKey: '',
      villageList: [],
    }
  },
  mounted() {
    this.activeKey = this.$route.query.activeKey ? this.$route.query.activeKey : '0'
  },
  methods: {
    handelClick(event) {
      this.activeKey = event
      this.searchTableData()
    },
    onTreeSelected(selectedKeys) {
      this.selectedKey = Array.isArray(selectedKeys) ? selectedKeys[0] : ''
      if (this.selectedKey) {
        this.searchTableData()
        this.loadDataWithTree({
          policeAgencyId: this.selectedKey,
        })
      }
    },
    searchTableData() {
      this.$nextTick(() => {
        // 调用各个组件的 search 方法
        this.$refs[`listRef${this.activeKey}`].searchQuery()
      })
    },
    async loadDataWithTree(treeNode) {
      const { policeAgencyId } = treeNode
      try {
        let res = await getCommunityList({
          policeAgencyId,
        })
        if (res.code == 200) {
          this.villageList = res.result
        }
      } catch (error) {
        console.log(error)
      } finally {
      }
    },
  },
}
</script>
<style lang="less" scoped>
.visitor-index {
  width: 100%;
  height: 100%;
  .pageInfo {
    width: 100%;
    height: 100%;
  }
}
</style>
